<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 搜索和添加用户区域 -->
      <el-row>
        <el-col :span='9'>
          <el-input clearable @clear='getUserList' placeholder="请输入用户名" v-model="queryInfo.query">
            <el-button slot="append" @click='getUserList' icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span='5'>
          <el-button type='primary' @click='addUserDialogVisible = true'>添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data='userList' style=" width: 100%" border stripe>
        <el-table-column label='#' type="index" width="50">
        </el-table-column>
        <el-table-column label="姓名" prop='username' width="180">
        </el-table-column>
        <el-table-column label="邮箱" prop='email' width="180">
        </el-table-column>
        <el-table-column label="电话" prop='mobile' width="180">
        </el-table-column>
        <el-table-column label="角色" prop='role_name' width="180">
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope='scope'>
            <el-switch @change='userStateChanged(scope.row)' v-model="scope.row.mg_state">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope='scope'>
            <el-button size='mini' type="primary" @click='editUserFormDialog(scope.row.id)' icon="el-icon-edit">
            </el-button>
            <el-button size='mini' type="danger" @click='deleteUserById(scope.row.id)' icon="el-icon-delete">
            </el-button>
            <!-- 用户提示工具 enterable:修改鼠标是否可以进入，改为false-->
            <el-tooltip :enterable='false' effect="dark" content="分配角色" placement="top">
              <el-button size='mini' @click='showUserDialog(scope.row)' type="warning" icon="el-icon-setting">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize" :current-page="queryInfo.pagenum"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加用户对话框区域 -->
    <el-dialog title="添加用户" :visible.sync="addUserDialogVisible" width="50%">
      <el-form ref="addFormRef" :rules="addFormRules" :model="addForm" label-width="80px">
        <el-form-item label="用户名" prop='username'>
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop='password'>
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop='email'>
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop='mobile'>
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click='cancilAddForm'>取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户的对话框 -->
    <el-dialog @close='editDialogClosed' ref="editUserFormRef" :rules='editUserFormRules' title="修改用户"
      :visible.sync="editUserFormDialogVisible" width="50%">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input disabled v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop='email'>
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop='mobile'>
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserFormDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分配用户的对话框 -->
    <el-dialog @close='showRoleDialogClosed' title="分配角色" :visible.sync="showUserDialogVisiable" width="50%">
      <div>
        <p>当前的用户：{{ userInfo.username }}</p>
        <p>当前的角色：{{ userInfo.role_name }}</p>
        <p>分配新角色：
          <el-select v-model='selectedRoleId' placeholder="请选择">
            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
            </el-option>
          </el-select>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showUserDialogVisiable = false">取 消</el-button>
        <el-button type="primary" @click="allotRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      // 检验邮箱的自定义规则
      var checkEmail = (rule, value, callback) => {
        const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

        if (regEmail.test(value)) {
          callback()
        } else {
          callback(new Error('请输入合法的邮箱'))
        }
      }
      // 校验手机号的规则
      var checkMobile = (rule, value, callback) => {
        const regMobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        if (regMobile.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的手机号'))
        }
      }
      return {
        queryInfo: {
          query: '',
          pagenum: 1,
          pagesize: 5
        },
        userList: [],
        total: 0,
        // 添加用户对话框是否隐藏
        addUserDialogVisible: false,
        // 添加用户所需要的用户信息数据
        addForm: {
          username: '',
          password: '',
          email: '',
          mobile: ''
        },
        // 添加用户信息的校验
        addFormRules: {
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 5,
              max: 10,
              message: '长度在 5 到 10个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 10,
              message: '长度在 6 到 10个字符',
              trigger: 'blur'
            }
          ],
          email: [{
              required: true,
              message: '请输入邮箱号',
              trigger: 'blur'
            },
            {
              validator: checkEmail,
              trigger: 'blur'
            }
          ],
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              validator: checkMobile,
              trigger: 'blur'
            }
          ]
        },
        // 修改用户的对话框是否隐藏
        editUserFormDialogVisible: false,
        // 修改用户数据
        editForm: {
          username: '',
          mobile: '',
          email: ''
        },
        // 校验修改用户对话框中的内容
        editUserFormRules: {
          email: [{
              required: true,
              message: '请输入邮箱号',
              trigger: 'blur'
            },
            {
              validator: checkEmail,
              message: '请输入合法的邮箱号',
              trigger: 'blur'
            }
          ]
        },
        // 显示和隐藏分配用户对话框
        showUserDialogVisiable: false,
        // 保存用户的信息
        userInfo: {},
        // 角色列表
        roleList: [],
        // selectedRoleId 选中的角色id
        selectedRoleId: ''
      }
    },
    created() {
      this.getUserList()
    },
    methods: {
      // 获取用户数据
      async getUserList() {
        const {
          data: res
        } = await this.$http.get('users', {
          params: this.queryInfo
        })
        if (res.meta.status !== 200) {
          this.$message.error('获取用户列表失败')
        }
        this.userList = res.data.users
        console.log(this.userList)
        // console.log(res.data)
        this.total = res.data.total
      },
      // 当每页显示的数据条数发生变化的时候触发
      handleSizeChange(newSize) {
        // console.log(newSize)
        // 重新为pagesize赋值
        this.queryInfo.pagesize = newSize
        // 获取用户列表数据
        this.getUserList()
      },
      // 当页码改变的时候触发
      handleCurrentChange(current) {
        // console.log(current)
        // 重新为current赋值
        this.queryInfo.pagenum = current
        // 获取用户列表数据
        this.getUserList()
      },
      // 用户状态变化
      async userStateChanged(state) {
        // 获取到用户状态
        console.log(state.mg_state)
        // 发起网络请求，更新用户状态
        const {
          data: res
        } = await this.$http.put(`users/${state.id}/state/${state.mg_state}`)
        // console.log(res)
        if (res.meta.status !== 200) return this.$message.error('用户状态修改失败')
        this.$message.success('用户状态更新成功')
      },
      // 点击添加用户按钮，执行操作
      async addUser() {
        // 获取点击用户的数据信息
        const {
          data: res
        } = await this.$http.post('users', this.addForm)
        // 弹出对话框
        // console.log(res)
        if (res.meta.status !== 201) return this.$message.error('添加用户信息失败')
        // 添加用户信息成功提示
        this.$message.success('添加用户信息成功')
        // 刷新用户列表
        this.getUserList()
        // 隐藏对话框
        this.addUserDialogVisible = false
      },
      // 点击对话框中的取消
      cancilAddForm() {
        // 重置表单
        // console.log(111)
        // 重置表单
        this.$refs.addFormRef.resetFields()
        // 添加用户对话框隐藏
        this.addUserDialogVisible = false
      },
      // 显示修改用户信息对话框
      async editUserFormDialog(userId) {
        // 通过网络请求获取当前点击修改用户的信息
        const {
          data: res
        } = await this.$http.get('users/' + userId)
        // 显示修改用户对话框
        // console.log(res)
        if (res.meta.status !== 200) {
          return this.$message.error('获取用户数据失败')
        }
        // console.log(111)
        this.editForm = res.data
        // 显示修改用户对话框
        this.editUserFormDialogVisible = true
      },
      // 关闭对话框重置表单
      editDialogClosed() {
        // 编辑用户对话框重置
        this.$refs.editUserFormRef.resetFields()
      },
      // 提交修改用户表单数据
      editUser() {
        this.$refs.editUserFormRef.validate(async valid => {
          if (!valid) return this.$http.error('填写内容不合法')
          const {
            data: res
          } = await this.$http.put('users/' + this.editForm.id, this.editForm)
          if (res.meta.status !== 200) return this.$message.error('修改数据失败')
          // 修改成功的提示
          this.$message.success('修改用户数据成功')
          // 隐藏修改用户对话框
          this.editUserFormDialog = false
          // 重新获取用户信息列表
          this.getUserList()
        })
      },
      // 弹出删除提示弹框
      async deleteUserById(id) {
        const confirmResult = await this.$confirm(
          '此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        // console.log(confirmResult)
        if (confirmResult !== 'confirm') return this.$message.info('取消删除')
        // 发送网络请求删除用户
        const {
          data: res
        } = await this.$http.delete('users/' + id)
        if (res.meta.status !== 200) return this.$message.error('删除用户失败')
        // 提示删除成功
        this.$message.success('删除用户成功')
        // 重新获取用户列表
        this.getUserList()
      },
      // 点击分配用户，弹出对话框
      async showUserDialog(user) {
        // 当前用户的信息保存到data的userInfo中
        this.userInfo = user
        // 在弹出对话框之前，先获取所有的用户角色数据
        const {
          data: res
        } = await this.$http.get('roles')
        // console.log(res)
        if (res.meta.status !== 200) return this.$message.error('获取用户角色数据失败')
        this.roleList = res.data
        // 分配用户对话框显示
        this.showUserDialogVisiable = true
      },
      // 分配角色
      async allotRole() {
        // 如果没有选中角色就返回
        if (!this.selectedRoleId) {
          return this.$message.error('请选择要分配的角色')
        }
        // 发送网络请求分配角色
        const {
          data: res
        } = await this.$http.put(`users/${this.userInfo.id}/role`, {
          rid: this.selectedRoleId
        })
        if (res.meta.status !== 200) {
          return this.$message.error('分配角色失败')
        }
        // 成功提示
        this.$message.success('角色分配成功')
        // 刷新用户列表
        this.getUserList()
        // 隐藏对话框
        this.showUserDialogVisiable = false
      },
      // 分配角色对话框关闭
      showRoleDialogClosed() {
        // 清空selecedRoleId
        this.selectedRoleId = ''
        // 清空userInfo
        // this.userInfo = {}
      }
    }
  }

</script>
<style lang='less' scoped>
  /* 让面包屑导航与card有间距 */
  .el-breadcrumb {
    margin-bottom: 20px;
  }

  /* 减弱card的阴影效果 */
  .el-card {
    box-shadow: 0 0 10px #ddd !important;
  }

  /* 表格与添加用户有一定的距离 */
  .el-table {
    margin-top: 10px;
  }

</style>
